<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">

<style type="text/css">
	.info-box-content {
		padding: 5px 10px;
		margin-left: 90px;
	}
	.info-box-number {
		display: block;
		font-weight: bold;
		font-size: 18px;
		margin-top: 15px;
	}
	.info-box-text {
		text-transform: uppercase;
	}
	.ibox , .ibox-content {
		border: 0px !important ;
	}
	.info-box {
		display: block;
		min-height: 90px;
		background: #fff;
		width: 100%;
		box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.1) ; 
		border-radius: 2px;
		margin-bottom: 15px;
	}
	.bg-red{
		background-color: #dd4b39 !important;
	}
	.bg-aqua{
		background-color: #00c0ef !important ; 
	}
	.bg-yellow{
		background-color: #f39c12 !important ; 
	}
	span.info-box-icon {
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 2px;
		display: block;
		float: left;
		height: 90px;
		width: 90px;
		text-align: center;
		font-size: 45px;
		line-height: 90px;
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-desktop"></i> 工作面板</h4>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><i class="fab fa-google-plus-g"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">消息通知</span>
                                        <span class="info-box-number">12 条</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fas fa-paper-plane"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">服务实例 </span>
                                        <span class="info-box-number">41,410 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow"><i class="fab fa-docker"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">服务节点</span>
                                        <span class="info-box-number">7 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                       	
                       	<h4>工作日历</h4> 
                        <div class="list-group">
						  <a href="#" class="list-group-item active">
						  	18-10 12:45 【部署服务】部署业务组件失败
						  </a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">42</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a>
						</div>

                    </div>
                </div>
            </div>
        	<div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-leaf"></i> 通知公告</h4>
                    </div>
                    <div class="ibox-content" style="padding-top:0px;">
                     	<div class="list-group">
						  <a href="#" class="list-group-item active">
						  	18-10 12:45 【部署服务】部署业务组件失败
						  </a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">42</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a>
						</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-sm-12"> 
        	<div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fas fa-paper-plane"></i> 系统CPU</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link"><i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="close-link"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th width="35%">属性</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>核心数</td>
                                        <td th:text="${server.cpu.cpuNum}">0个</td>
                                    </tr>
                                    <tr>
                                        <td>用户使用率 (<span th:text="${server.cpu.used+'%'}"></span>)</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.used gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.used}" 
											  		th:text="${server.cpu.used}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.used + '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>系统使用率 (<span th:text="${server.cpu.sys+'%'}"></span>)</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.sys gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.sys}" 
											  		th:text="${server.cpu.sys}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.sys+ '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>当前空闲率 (<span th:text="${server.cpu.free+'%'}"></span>)</td>
                                        <td>
                                        
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.cpu.free lt 20} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.cpu.free}" 
											  		th:text="${server.cpu.free}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.cpu.free + '%'}">
											  </div>
											</div> 
											
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fab fa-docker"></i> 系统内存</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                <a class="close-link"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th>属性</th>
                                        <th>内存 <span class="label-text">([[${server.mem.usage}]]%)</span></th>
                                        <th>JVM <span class="label-text">([[${server.jvm.usage}]]%)</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>总内存</td>
                                        <td th:text="${server.mem.total + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.total + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>已用内存</td>
                                        <td th:text="${server.mem.used + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.used + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>剩余内存</td>
                                        <td th:text="${server.mem.free + 'G'}">0GB</td>
                                        <td th:text="${server.jvm.free + 'M'}">0MB</td>
                                    </tr>
                                    <tr>
                                        <td>使用率</td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.mem.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.mem.usage}" 
											  		th:text="${server.mem.usage}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.mem.usage+ '%'}">
											  </div>
											</div> 
                                        </td>
                                        <td>
                                       		<div class="progress">
											  <div class="progress-bar progress-bar-striped active" role="progressbar" 
											  		th:class="${server.jvm.usage gt 80} ? 'progress-bar progress-bar-striped progress-bar-danger active':'progress-bar progress-bar-striped active'"
											  		th:aria-valuenow="${server.jvm.usage}" 
											  		th:text="${server.jvm.usage}" 
											  		aria-valuemin="0" 
											  		aria-valuemax="100" 
											  		th:style="${'width:' + server.jvm.usage+ '%'}">
											  </div>
											</div> 
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>

	<footer th:replace="dashboard/footer :: footer"></footer>

</body>
</html>

